import React from 'react';
import { connect } from 'dva';
import { Helmet } from 'react-helmet';
import styles from './ExamReasult.less';
import { routerRedux } from "dva/router";

class ExamReasult extends React.Component {

  componentDidMount() {
    this.props.getTrains();
  }


  render() {
    const { dispatch, exam, time } = this.props;
    const { total } = exam.pagination;

    return (
      <div className={styles.all}>
        <Helmet>
          <title>
            考试结果
          </title>
        </Helmet>

        <div className={styles.top}>
          <div className={styles.text1}>考试成绩</div>
          <div className={styles.text2}><span className={styles.score}>{this.props.score}</span>分</div>
          <div className={styles.line} />
          <div className={styles.text3}>用时：{time}</div>
        </div>

        <div className={styles.section}>
          <div className={styles.section1}>
            <div className={styles.text1}>答对题</div>
            <div className={styles.correctNum}>{this.props.correctNum}</div>
          </div>
          <div className={styles.section1}>
            <div className={styles.text1}>答错题</div>
            <div className={styles.errorNum}>{this.props.errorNum}</div>
          </div>
          {/* <div className={styles.section1}>
            <div className={styles.text1}>未做题</div>
            <div className={styles.undoNum}>{total-this.props.correctNum-this.props.errorNum}</div>
          </div>*/}
        </div>

        <div className={styles.section2}>
          <div className={styles.section21} onClick={this.props.detail}>
            <div>
              <img src={require('../assets/examDetail.png')} alt="" />
            </div>
            <div>
              <div>考试详情</div>
              <div className={styles.text1}>错在哪里？快来回顾</div>
            </div>
          </div>
          <div className={styles.section21} onClick={this.props.goSchoolExamTab}>
            <div>
              <img src={require('../assets/examAgain.png')} alt="" />
            </div>
            <div>
              <div>在线考试</div>
              <div className={styles.text1}>返回在线考试</div>
            </div>
          </div>
        </div>

      </div>
    );
  }
}


export default connect(
  (state, props) => {
    const time = props.location.query.time;
    return {
      exam: state.exam,
      time,
      correctNum: state.exam.correctNum,
      errorNum: state.exam.inCorrectNum,
      score: state.exam.score,
    };
  },
  (dispatch, props) => {
    return {
      reload() {
        dispatch(routerRedux.goBack());
      },
      getTrains() {
        const ref_type = props.location.query.ref_type;
        const ref_id = props.location.query.ref_id;
        dispatch({ type: 'exam/getTrains', payload: { ref_type, ref_id, type: 'exam' } });
      },
      detail() {
        const examLibName = props.location.query.examLibName;
        const ref_type = props.location.query.ref_type;
        const ref_id = props.location.query.ref_id;
        const type = props.location.query.type;
        const shopId = props.location.query.shopId;
        dispatch(routerRedux.push({
          pathname: '/examStatistics',
          query: {
            examLibName: decodeURIComponent(examLibName),
            ref_type,
            ref_id,
            shopId,
            type,
          },
        }));
      },
      goExamList() {
        const shopId = props.location.query.shopId;
        dispatch(routerRedux.push({
          pathname: '/examPaperList',
          query: {
            shopId,
          },
        }));
      },
      goSchoolExamTab() {
        dispatch(routerRedux.push({ pathname: '/', query: { selected: 'tab2', homeSchoolTab: '2' } }));
      },
    };
  },
)(ExamReasult);
